<template>
	<div class="main">
		<div class="main-top">
			<div class="ov-h">
				<div class="title">首页首页</div>
			</div>
			<div class="banner" >
				<swiper :options="swiperOption">
					<swiper-slide></swiper-slide>
					<swiper-slide></swiper-slide>
					<swiper-slide></swiper-slide>
				</swiper>
			</div>
			<div class="top-tip dis-flex align-center" :if="topList.length>0">
				<div class="tip-pal">消息头条</div>
				<div class="flex-1 top-tip-list">
					<div :style="{marginTop:topMargin+'px'}" class="transition-margin">
						<div class="top-tip-item" v-for="item in topList">恭喜用户{{item.mobile}}获得<font style="padding:0 2px;color: #FD4658;">{{item.gold_num}}</font>金币。</div>
					</div>
				</div>
			</div>
			<div class="top-menu dis-flex t-c ft-24 mt-50">
				<div class="flex-1">
					<div class="icon-out icon-recharge"></div>
					<div class="menu-name">存款充值</div>
				</div>
				<div class="flex-1">
					<div class="icon-out icon-freetry"></div>
					<div class="menu-name">免费试玩</div>
				</div>
				<div class="flex-1">
					<div class="icon-out icon-proxy"></div>
					<div class="menu-name">代理赚钱</div>
				</div>
				<div class="flex-1">
					<div class="icon-out icon-service"></div>
					<div class="menu-name">在线客服</div>
				</div>
			</div>
		</div>
		<Commoncontainer title="娱乐大厅">
			<div class="games-list dis-flex">
				<div class="game-item">
					<router-link to="/hourlottery" class="dis-block">
						<span class="co-white game-name">时时猜</span>
						<img src="@/assets/yl_img1.png">
					</router-link>
				</div>
				<div class="game-item">
					<span class="co-white game-name">分分猜</span>
					<img src="@/assets/yl_img2.png">
				</div>
				<div class="game-item t-c dis-flex align-center">
					<span class="co-white game-name develop flex-1">敬请期待</span>
				</div>
			</div>
		</Commoncontainer>
		<Commoncontainer title="中奖榜单" v-show="drawList.length>0">
			<div class="win-list">
				<Listitem v-for="item in drawList">
					<template slot="left">
						<div class="dis-flex align-center">
							<img class="win-icon" src="@/assets/win_icon.png" />
							<img class="win-head" :src="item.face" />
						</div>
					</template>
					<template slot="center">
						<div class="ml-12">
							<div class="ft-32">{{item.name}}</div>
							<div class="ft-24 win-time">{{item.time}}</div>
						</div>
					</template>
					<template slot="right">
						<div class="t-r">
							<div class="win-number">{{item.gold_num}}</div>
							<div class="ft-24">{{item.type}}</div>
						</div>
					</template>
				</Listitem>
				<!-- <Listitem>
					<template slot="left">
						<div class="dis-flex align-center">
							<img class="win-icon" src="@/assets/win_icon.png" />
							<img class="win-head" src="@/assets/head_img.png" />
						</div>
					</template>
					<template slot="center">
						<div class="ml-12">
							<div class="ft-32">罗恩</div>
							<div class="ft-24 win-time">2018-05-28 11:42</div>
						</div>
					</template>
					<template slot="right">
						<div class="t-r">
							<div class="win-number">2750</div>
							<div class="ft-24">时时猜-龙虎斗</div>
						</div>
					</template>
				</Listitem>
				<Listitem>
					<template slot="left">
						<div class="dis-flex align-center">
							<img class="win-icon" src="@/assets/win_icon.png" />
							<img class="win-head" src="@/assets/head_img.png" />
						</div>
					</template>
					<template slot="center">
						<div class="ml-12">
							<div class="ft-32">罗恩</div>
							<div class="ft-24 win-time">2018-05-28 11:42</div>
						</div>
					</template>
					<template slot="right">
						<div class="t-r">
							<div class="win-number">2750</div>
							<div class="ft-24">时时猜-龙虎斗</div>
						</div>
					</template>
				</Listitem> -->
			</div>
		</Commoncontainer>
	</div>
</template>
<script>
	import Commoncontainer from "@/components/common-container";
	import Listitem from "@/components/list-item";
	import 'swiper/dist/css/swiper.css'

	import { swiper, swiperSlide } from 'vue-awesome-swiper'

	import {gettoplist,getWinList} from '@/api/index';
	import getWinSize from '@/utils/winSize';
	export default {
		data(){
			let winWidth=0;
			if (window.innerWidth)
			winWidth = window.innerWidth;
			else if ((document.body) && (document.body.clientWidth))
			winWidth = document.body.clientWidth;
			return {
				topMargin:0,
				topList:[],
				drawList:[],
				banner:[{}],
				swiperOption:{
					slidesPerView: 'auto',
		          	centeredSlides: true,
		          	spaceBetween: winWidth*10/375,
		          	pagination: {
		            	el: '.swiper-pagination',
		            	clickable: true
		          	}
				},
			}
		},
		mounted(){
			this.topIndex=0;//头条消息 索引
			this.topInterval=null;//头条 定时器
			this.gettoplist();
			this.getWinList();
		},
		destroyed(){
			clearInterval(this.topInterval);//清除定时器
		},
		methods:{
			gettoplist(){//获取头条消息
				gettoplist().then(res=>{
					if (res.code==1) {
						this.topList=res.data.top_message;
						if (this.topList.length>1) {
							this.setTopInterval();//消息定时上下滚动
						}
					}
				});
			},
			getWinList(){ //获取中奖榜单
				getWinList().then(res=>{
					console.log(res);
					if (res.code==1) {
						this.drawList=res.data.draw_list;
					}
				})
			},
			setTopInterval(){//消息定时上下滚动方法
				let winWidth=getWinSize().width;
				this.topInterval=setInterval(()=>{
					let topLen=this.topList.length;
					console.log(this.topIndex);
					if (this.topIndex<topLen-1) {
						this.topMargin=-(this.topIndex+1)*4.8*winWidth/100;
						console.log(this.topMargin);
						this.topIndex++;
					}else{
						this.topMargin=0;
						this.topIndex=0;
					}
				},5000);
			}
		},
		components:{
			Commoncontainer,
			Listitem,
			swiper,
    		swiperSlide
		}
	}
</script>
<style scoped lang="scss">
	.ml-12{margin-left: 12px;}

	.main{background-color:#F8F8F8;color: #5D5174;}
	.main-top{padding-bottom:50px;background: #FFF;}
	.title{margin: 16px 40px 12px;font-size: 44px;color: #5D5174;}
	.banner-item{height: 240px;}
	.swiper-slide{width: 670px;height: 240px;margin-bottom:50px;background: url('../assets/banner-1.png');background-size: cover;    box-shadow: 0 18px 40px 0 rgba(98,87,242,0.49);}
	.transition-margin{transition:all 1000ms;}
	.top-tip{font-size: 24px;margin-left: 30px;}
	.top-tip-list{height: 36px;margin-left: 10px;overflow: hidden;}
	.top-tip-list .top-tip-item{line-height: 36px;}
	.tip-pal{position: relative;display: inline-block;padding: 4px 16px 4px 10px;background-image: linear-gradient(-139deg, #921DFF 0%, #833BFF 100%);border-radius: 4px;color: #FFF;}
	.tip-pal:after{position: absolute;right:0;bottom:0;content: " ";display: block;width: 0;height: 0;border-top: 36px solid transparent;border-left: 40px solid transparent;border-right: 10px solid #FFF;}

	.icon-out {width: 108px;height: 108px;border-radius: 50%;margin: 0 auto;}
	.icon-recharge{background-image: linear-gradient(-138deg, #FDD03D 3%, #FAAD2E 91%);}
	.icon-freetry{background-image: linear-gradient(-140deg, #6A80FA 1%, #4B5AFE 99%);}
	.icon-proxy{background-image: linear-gradient(-146deg, #FA9417 5%, #F63E16 98%);}
	.icon-service{background-image: linear-gradient(-140deg, #F28DF1 3%, #CF73E9 100%);}
	.menu-name{margin-top: 18px;}


	.games-list{margin: 24px 30px 0;}
	.game-item{position: relative;width: 220px;height: 260px;margin-left:16px;border-radius: 16px;background-size:cover;background-position: center; }
	.game-item:first-child{margin-left: 0;background-image: linear-gradient(-137deg, #FE9579 0%, #FD3D4F 100%);background-image: url("../assets/yl_bg1.png");}
	.game-item:nth-child(2){background-image: linear-gradient(-137deg, #CBA8FD 0%, #693FEA 100%);background-image: url("../assets/yl_bg2.png");}
	.game-item:nth-child(3){background-image: linear-gradient(-135deg, #E9E9E9 0%, #D2D2D2 100%);}
	.game-name{margin:26px;display: inline-block;font-weight: bold;}
	.game-name.develop{color: #A7A6A8;}
	.game-item img{position: absolute;right: 28px;bottom:24px;width: 120px;height: 120px;}


	.win-list{padding: 0 40px;}
	.win-icon{width: 40px;padding: 0 10px;}
	.win-head{width: 84px;height: 84px;margin-left: 10px;}
	.win-time{margin-top: 4px;color: #958DA5;}
	.win-number{font-size: 40px;color: #FD4658;}
</style>